import { Button, Form, Input, Modal } from 'antd';
import React, { Component } from 'react';

import { FormComponentProps } from 'antd/es/form';
import { TableListItem } from '../data.d';

export interface FormValueType extends Partial<TableListItem> {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface UpdateFormProps extends FormComponentProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
}
const FormItem = Form.Item;

export interface UpdateFormState {
  formVals: FormValueType;
}

class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
  formRef = React.createRef();
  static defaultProps = {
    handleUpdate: () => {},
    handleUpdateModalVisible: () => {},
    values: {},
  };

  formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
  };

  constructor(props: UpdateFormProps) {
    super(props);
    this.state = {
      propsItem: {
        id:props.values.id,
        name: props.values.name,
        remark: props.values.remark,
      }
    };
  }

  handleNext = () => {
    const { form, onSubmit: handleUpdate } = this.props;
    // const { formVals } = this.state;
    let {validateFields} =  this.formRef.current;
    validateFields().then(values=>{
      console.log(values);
      handleUpdate(values);
    })
  };



  renderFooter = () => {
    const { onCancel: handleUpdateModalVisible, values } = this.props;
    return [
      <Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
        取消
      </Button>,
      <Button key="forward" type="primary" onClick={() => this.handleNext()}>
        完成
      </Button>,
    ];
  };

  render() {
    const { updateModalVisible, onCancel: handleUpdateModalVisible, values } = this.props;
    const {  formVals } = this.state;
    const { form } = this.props;
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title="教室修改"
        visible={updateModalVisible}
        footer={this.renderFooter()}
        onCancel={() => handleUpdateModalVisible(false, values)}
        afterClose={() => handleUpdateModalVisible()}
      >
        <Form
          ref={this.formRef}
          initialValues={this.state.propsItem}>
        <FormItem key="id" {...this.formLayout} name="id">
          <Input placeholder="请输入" hidden/>
        </FormItem>,
        <FormItem key="name" name="name" {...this.formLayout} label="教室名称" name="name" rules={[{ required: true, message: '请输入教室名称！' }]}>
         <Input placeholder="请输入" />
        </FormItem>,
        <FormItem key="remark" name="remark" {...this.formLayout} label="教师备注"  rules={[{ required: true, message: '请输入至少两个字符的教室备注！', min: 2 }]}>
          <Input placeholder="请输入" />
        </FormItem>
      </Form>
      </Modal>
    );
  }
}

export default UpdateForm;
